<template>
  <div class="mainbody">
    <dv-loading v-show="runFlag !== 0" class="loading">Loading...</dv-loading>
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="button-group">
        <span>只看开机 </span
        ><el-switch
          v-model="filter"
          active-color="#00f4ff"
          inactive-color="#bbb"
        />
        <button
          :class="[
            'system-button',
            system === 'mediumChillWater' ? 'system-button-selected' : '',
          ]"
          type="primary"
          @click="setSystem('mediumChillWater')"
        >
          中温冰机
        </button>
        <button
          :class="[
            'system-button',
            system === 'lowChillWater' ? 'system-button-selected' : '',
          ]"
          type="primary"
          @click="setSystem('lowChillWater')"
        >
          低温冰机
        </button>
      </div>
      <div class="elec-trend">
        <div class="elec-trend-title">冰机设备实时状态</div>
        <div class="elec-trend-title">历史COP散点图</div>
        <div class="elec-trend-title">COP曲线</div>
        <div class="elec-trend-title">
          冷却水温度-COP曲线<span
            >（当前负荷率下不同冷却水温度对应的cop值）</span
          >
        </div>
      </div>
      <div class="view-frame">
        <EnergyCard
          v-for="(item, index) in dataList"
          :key="index"
          :best-machine="bestMachine"
          :current-data="
            currentData
              ? currentData.find((e) => e.machine_id === item.machine_id)
              : {}
          "
          :last7-data="
            last7Data
              ? last7Data.find((e) => e.machine_id === item.machine_id)
              : {}
          "
          :computed-data="
            computedData
              ? computedData.find((e) => e.machine_id === item.machine_id)
              : {}
          "
          :best-data="
            bestData
              ? bestData.filter((e) => e.machine_id === item.machine_id)
              : {}
          "
          :right-data="
            rightData
              ? rightData.find((e) => e.machine_id === item.machine_id)
              : {}
          "
          @popup="popup"
        />
      </div>
    </div>
    <PopupWindow
      v-show="showData"
      :title="'同类型设备COP对比'"
      :data-name="'COP'"
      :pop-data="popData"
      @hide="hide"
    />
  </div>
</template>

<script>
import redisService from "@service/redisRequest.js";
import "element-ui/lib/theme-chalk/index.css";
import { mapState } from "vuex";
const chillService = {
  lowChillWater: {
    getMachineInfo: "getLowMachineInfo",
    getChillerCurrentData: "getLowChillerCurrentData",
    getChillerLast7Data: "getLowChillerLast7Data",
    getChillerComputedData: "getLowChillerComputedData",
    getChillerBestLine: "getLowChillerBestLine",
    getChillerRightData: "getLowChillerRightData",
  },
  mediumChillWater: {
    getMachineInfo: "getMediumMachineInfo",
    getChillerCurrentData: "getMediumChillerCurrentData",
    getChillerLast7Data: "getMediumChillerLast7Data",
    getChillerComputedData: "getMediumChillerComputedData",
    getChillerBestLine: "getMediumChillerBestLine",
    getChillerRightData: "getMediumChillerRightData",
  },
};
export default {
  components: {
    MainTitle: () => import("@/components/MainTitle.vue"),
    EnergyCard: () => import("./module/EnergyCard.vue"),
    PopupWindow: () => import("@/components/PopupWindow.vue"),
    // vechart: () => import('@components/charts/Vechart.vue')
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      showData: false,
      runFlag: 0,
      system: "mediumChillWater",
      filter: false,
      machineList: [],
      currentData: [],
      last7Data: [],
      computedData: [],
      bestData: [],
      rightData: [],
      bestMachine: "",
      redisService,
      chillService,
      popData: {},
    };
  },
  computed: {
    mainTitle() {
      return this.title;
    },
    ...mapState({
      service: (state) => state.service,
      webModel: (state) => state.authentication.webModel,
      treeTemplate: (state) => state.component.treeTemplate,
    }),
    dataList() {
      if (!this.filter) {
        return this.machineList;
      } else {
        if (this.currentData.length) {
          return this.currentData.filter(
            (i) => i.value.find((e) => e.tag_id === "s").value === 3
          );
        } else {
          return [];
        }
      }
    },
  },
  created() {
    this.initChiller();
    setTimeout(() => {
      this.runFlag = 0;
    }, 10000);
  },
  methods: {
    popup(data) {
      this.popData = data;
      this.showData = true;
    },
    hide() {
      this.showData = false;
    },
    setSystem(system) {
      this.system = system;
      this.initChiller();
    },
    async initChiller() {
      this.getMachineInfo();
      this.getChillerCurrentData();
      this.getChillerLast7Data();
      this.getChillerComputedData();
      this.getChillerBestLine();
      this.getChillerRightData();
    },
    async getMachineInfo() {
      this.runFlag = 1;
      // const result2 = await this.redisService.getLowChillerLast7Data()
      const result = await this.service[
        this.chillService[this.system].getMachineInfo
      ]();
      this.runFlag = 0;
      if (!result || !result.data) {
        this.$notify({
          title: "设备信息获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.machineList = result.data;
      // console.log(this.machineList,'4444444444')
    },
    async getChillerCurrentData() {
      this.runFlag = 1;
      // const result1 = await this.redisService.getLowChillerCurrentData()
      const result1 = await this.service[
        this.chillService[this.system].getChillerCurrentData
      ]();

      this.runFlag = 0;
      if (!result1 || !result1.data) {
        this.$notify({
          title: "当前状态数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.currentData = result1.data.filter((e) => e.machine_id);

      const bestMachine = result1.data.map((e) => {
        return e.value.find((i) => i.tag_id === "cop").value;
      });
      console.log(bestMachine, "cuuent");
      if (Math.max(...bestMachine) > 0) {
        const ind = bestMachine.indexOf(Math.max(...bestMachine));
        const id = result1.data[ind];
        this.bestMachine = id.machine_id;
      }
    },
    async getChillerLast7Data() {
      this.runFlag = 1;
      // const result2 = await this.redisService.getLowChillerLast7Data()
      const result2 = await this.service[
        this.chillService[this.system].getChillerLast7Data
      ]();
      this.runFlag = 0;
      if (!result2 || !result2.data) {
        this.$notify({
          title: "COP数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.last7Data = result2.data;
    },
    async getChillerComputedData() {
      this.runFlag = 1;
      const result3 = await this.service[
        this.chillService[this.system].getChillerComputedData
      ]();
      this.runFlag = 0;
      if (!result3 || !result3.data) {
        this.$notify({
          title: "冷却水数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.computedData = result3.data[0].data;
    },
    async getChillerBestLine() {
      this.runFlag = 1;
      // const result4 = await this.redisService.getLowChillerBestLine()
      const result4 = await this.service[
        this.chillService[this.system].getChillerBestLine
      ]();
      this.runFlag = 0;
      if (!result4 || !result4.data) {
        this.$notify({
          title: "COP曲线数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.bestData = result4.data;
    },
    async getChillerRightData() {
      this.runFlag = 1;
      const result5 = await this.service[
        this.chillService[this.system].getChillerRightData
      ]();
      this.runFlag = 0;
      if (!result5 || !result5.data) {
        this.$notify({
          title: "冷却水-COP曲线数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.rightData = result5.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba($color: #333, $alpha: 0.7);
  z-index: 9;
}
.mainbody {
  height: 100vh;
  background: url("~@assets/report/bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.container {
  position: relative;
  width: 95%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
.view-frame {
  display: flex;
  flex-flow: column nowrap;
  height: 78%;
  justify-content: flex-start;
  overflow-y: scroll;
  // margin-top: 1rem;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    // 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {
    // 兼容Opera
    display: none;
  }
  scrollbar-width: none; // 兼容Firefox
  -ms-overflow-style: none; // 兼容edge
}
.button-group {
  position: absolute;
  top: 3%;
  right: 0;
  span {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 1.2rem;
    margin: 0 0.3rem;
  }
  .system-button {
    width: 7rem;
    height: 3.2rem;
    line-height: 3rem;
    color: white;
    align-self: center;
    background-color: transparent;
    border: 1.5px solid rgba(185, 183, 183, 0.5);
    border-radius: 0;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 600;
    margin-left: 2rem;
  }
}
.system-button-selected {
  background-color: #00f4ff !important;
  color: #122a7a !important;
}
.elec-trend {
  display: flex;
  height: 3rem;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  margin: 1rem 0;
}
.elec-trend-title {
  flex-basis: 25%;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 3rem;
  span {
    font-size: 1.4rem;
  }
}
</style>
